<template>
  <div class="TagManage">
    <!--t添加删除按钮-->
        <div  class="buttonGroup">
          <Button type="ghost"  icon="ios-plus-empty"  @click="modal1 = true">添加标签</Button>
          <Modal
            v-model="modal1"
            title="添加标签"
            @on-ok="ok1"
            @on-cancel="cancel1">
            <p>标签名称 :</p>
            <input type="text" v-model="addValue" maxlength="15" placeholder="最多保存15个字" class ="iptSty">
          </Modal>
          <Button type="ghost"  icon="ios-minus-empty"  @click="delADD(presentID,presentName)">删除标签</Button>
          <Button type="ghost"  icon="leaf" @click="changeMake = true" >修改标签</Button>
          <Modal
            v-model="changeMake"
            title="修改标签"
            @on-ok="ok2(presentID,presentName)"
            @on-cancel="cancel2">
            <p>标签名称 :</p>
            <input type="text" v-model="presentName" maxlength="15" placeholder="最多保存15个字" class ="iptSty">
          </Modal>
        </div>
    <!--标签列表-->
    <div  class="TagManagList">
      <ul  >
        <li  v-for="(item,index)  in TagListData"  :class="{unactive:isRestReasonActive !=index,active:isRestReasonActive ==index}">
           <span  @click="setIndex(item.id ,item.name,index) " >{{ item.name}}</span>
        </li>
      </ul>
    </div>
    <!--添加标签弹出页-->
  </div>
</template>
<script>
  import tagGroup from "service/tagGroup.js";
  export default {
    data() {
      return {
        modal1: false,
        changeMake: false,
        addValue:'',
        colValue:'',
        TagListData:[],//所有用户标签
        isRestReasonActive:-1,//颜色变化
        presentID:'',//当前ID
        presentName:'',//当前nameShow

      };
    },
    computed: {

    },
    created(){
    },
    methods: {
      changeMake(){
        if(this.presentID==''){
          this.changeMake= false;
          this.$Message.info('请选择要修改的标签');
        }
      },
      //添加
      ok1 () {
        let _this = this
        if(this.addValue==''){
          this.$Message.info('请输入要添加的标签内容');
        }else{
          this.child_addTag(this.addValue);
          this.addValue='';
          this.$Message.info('添加成功');
        }
      },
      cancel1 () {
        this.$Message.info('已取消');
      },
      //修改
      ok2 (id,name) {
        if(id==''){
          this.$Message.info('请选择要修改的标签');
        }else{
          this.corAddTag( id,name)
          this.$Message.info('修改成功');
        }
      },
      cancel2 () {
        this.$Message.info('已取消');
      },
      //删除
      delADD(id){
        if(id==''){
            this.$Message.info('请选择标签');
          }else{
            this.delAddTag( id);
            this.getAddTag();
          }
      },
      //将值赋给删除和修改方法
      setIndex(id,name,index){
        this.isRestReasonActive=index
        this.presentID=id;
        this.presentName=name;
      },
      //添加标签
      async child_addTag( name) {
        let jsondata = await tagGroup.child_addTag({
          'name':name,
        })
        if (!jsondata) {
          jsondata = ''
        }
        this.getAddTag();
      },
      //修改标签
      async corAddTag( id,name) {
        let jsondata = await tagGroup.corAddTag({
          'id':id,
          'name':name,
        })
        if (!jsondata) {
          jsondata = ''
        }
        this.getAddTag();
      },
      //删除标签
      async delAddTag(id) {
        let jsondata = await tagGroup.delAddTag(id)
        if (!jsondata) {
          jsondata = ''
        }
        this.getAddTag();
        this.presentID='';
        this.presentName='';
        this.isRestReasonActive=-1
      },
      //获取所有标签
      async getAddTag() {
        let jsondata = await tagGroup.getAddTag()
        if (!jsondata) {
          jsondata = ''
        }
        this.TagListData=jsondata.data;
      },
    },
    mounted() {
      this.getAddTag()

    }
  };
</script>
<style scoped>
  .TagManage{
    width: 100%;
  }
  .buttonGroup{
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #80848f;
    text-align: left;
  }
  .TagManagList{
    text-align: left;
  }
  .TagManagList ul{
      margin-top: 5px;
  }
  .TagManagList ul li{
    float: left;
    padding: 3px;
    margin-left: 10px;
    margin-top: 5px;
    border: 1px solid #80848f;
    cursor: pointer;
  }
  .iptSty{
    width: 250px;
  }
 .unactive{

  }
   .active{
    background-color: #2d8cf0;
    color: #fff;
  }
</style>
